<!-- 一键加载模板 index -->
<template>
	<view class="content" style="height: 100%;">
		<BaseNavBar :isnormal="true" title="一键加载模板" />
		<view class="body">
			<!-- cell -->
			<view class="template">
				<form @submit="formSubmit" @reset="formReset">
					<view class="form-item">
						<view class="title">模板标题：</view>
						<input class="input" name="input" placeholder="请输入模板标题" :value="templateData.title" @input="titValue" />
					</view>
					<view class="form-item">
						<view class="title">图片上传：</view>
						<view class="flex-sub">
							<view class="bg-img" v-for="(item, index) in imgList" :key="index">
								<image :src="item" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">x</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length < 8">+</view>
						</view>
					</view>
					<view class="form-item">
						<view class="title">模板内容：</view>
						<textarea placeholder="请输入模板内容" :value="templateData.content" @input="conValue"></textarea>
					</view>
					<view class="form-item">
						<view class="title">备注：</view>
						<input class="input" name="input" placeholder="请输入备注" :value="templateData.orther" @input="otherValue" />
					</view>
					<button form-type="submit" class="page-btn" @click="submitTep()">提交模板</button>
				</form>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		saveTemplate
	} from '../../api'
import templateVue from '../template/template.vue'
	export default {
		data() {
			return {
				templateData: '',
				current: null,
				imgList: []
			}
		},
		mounted() {
			// this.getAllTemplate()
		},
		methods: {
			titValue(e){
				this.templateData.title = e.detail.value
			},
			conValue(e){
				this.templateData.content = e.detail.value
			},
			otherValue(e){
				this.templateData.orther = e.detail.value
			},
			ChooseImage(){
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择或者打开相机
					success: function(res) {
						if (res.tempFiles[0].size > 2 * 1024 * 1024) {
							_this.$refs.uToast.show({
								type: "error",
								message: "图片大小不得超过2MB"
							});
						} else {
							uni.uploadFile({
								url: "http://admin.api.moyangjia.top/api/File/upload",
								filePath: res.tempFilePaths[0],
								name: "file",
								success: uploadFileRes => {
									// console.log(JSON.parse(JSON.stringify(uploadFileRes.data)))
									uploadFileRes.data = JSON.parse(uploadFileRes.data).data
									if (_this) {
										_this.imgList = _this.imgList.concat(uploadFileRes.data.fileUrl)
									} else {
										_this.imgList = [uploadFileRes.data.fileUrl]
									}
									console.log(_this.imgList)
								}
							});
						}
					}
				});
			},
			formSubmit() {
				let {id} = uni.getStorageSync('userInfo')
				let data = {
					title: this.templateData.title,
					id: this.templateData.id,
					userId: id,
					orther: this.templateData.orther,
					content: this.templateData.content,
					pictureArray: this.imgList.join(",")
				}
				console.log(data)
				saveTemplate(data).then(res => {
					console.log('模版页===', res)
					if (res.status == 200) {
						
					}
				})
			},
			selectTep(idx) {
				this.current = idx
			},
			submitTep() {

			}
		},
		onLoad(option) {
			if (option.templateData != null) {
			    this.templateData = JSON.parse(decodeURIComponent(option.templateData))
				console.log(this.templateData,'this.templateData')
				let imgArr = this.templateData.pictureArray
				this.imgList = imgArr.split(',');
			}
		}
	}
</script>

<style lang="scss">
	.template {
		padding: 28px;
		font-size: 14px;
		color: #666;
		line-height: 35px;
	}

	.template .form-item {
		padding: 10px 0;
		border-bottom: 1px solid #EFF1F2;
		.flex-sub{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			flex-wrap: wrap;
			.bg-img{
				position: relative;
				image{
					width: 100px;
					height: 100px;
				}
				.cu-tag{
					width: 24px;
					height: 24px;
					line-height: 24px;
					border-radius: 50%;
					position: absolute;
					right: -10px;
					top: -10px;
					background-color: #f00;
					color: #fff;
				}
			}
			.solids{
				width: 100px;
				height: 100px;
				line-height: 96px;
				border: 1px solid #333;
				border-radius: 5px;
				font-size: 80px;
				text-align: center;
			}
		}
	}

	.template-item {
		display: flex;
		padding: 15px 19px;
		border: 1px solid #DFDFDF;
		border-radius: 8px;
		margin-bottom: 10px;
		font-size: 12px;
		color: #666;
		line-height: 16px;
	}

	.template-item .img {
		width: 100px;
		height: 100px;
		border-radius: 3px;
		margin-right: 26px;
	}

	.template-item .content {
		margin-left: auto;
		text-align: justify;
	}

	.template-item .content .title {
		font-size: 14px;
		color: #000;
		margin-bottom: 8px;
		font-weight: 700;
	}

	.template-item.current {
		background: #EFF1F2;
		border-color: #2456E0;
	}

	.template-item.current .content .title {
		color: #2456E0;
	}
</style>